<template>
  <div class="message_panel">
    <div class="bg" @click="showMP"></div>
    <div class="mp_box">
      <div class="mpb_left">
        <div :class="tab == 'comment' ? 'active' : ''" @click="tab = 'comment'">
          评论
        </div>
        <div :class="tab == 'message' ? 'active' : ''" @click="tab = 'message'">
          留言
        </div>
      </div>
      <div class="mpb_right">
        <div class="box" v-show="tab == 'comment'">
          <my-scroll :opacity="0.3">
            <template v-if="getNotify.comments && getNotify.comments.length">
              <div
                class="com_item"
                v-for="(item, index) in getNotify.comments"
                :key="'comment' + index"
              >
                <div class="item_box">
                  <div class="namebox">
                    <div class="child_avatars">
                      <img
                        :src="
                          item.fromUser.isAdmin
                            ? getAdmin.photo
                            : item.fromUser.photo
                        "
                        alt=""
                      />
                    </div>
                    <div class="child_info">
                      <div class="from">
                        {{
                          item.fromUser.isAdmin
                            ? getAdmin.userName
                            : item.fromUser.name
                        }}
                        <i class="isAdmin" v-if="item.fromUser.isAdmin">博主</i>
                      </div>
                      <div class="c_time">
                        {{ item.date | chatDateFormate }}
                      </div>
                    </div>
                    <div class="new" v-if="!item.read">新</div>
                  </div>
                  <div class="c_content" v-if="item.comment">
                    <span>回复了</span>
                    <span class="to" v-if="getUser.isAdmin"
                      >@{{
                        item.toUser.isAdmin
                          ? getAdmin.userName
                          : item.toUser.name
                      }}
                      <i class="isAdmin" v-if="item.toUser.isAdmin">博主</i>
                    </span>
                    <span class="to" v-else>你</span>
                    <span>在文章 《{{ item.arName }}》 中的评论:</span>
                    <div class="item_comment">{{ item.comment }}</div>
                    <div class="con_box">回复：{{ item.content }}</div>
                  </div>
                  <div class="c_content" v-else>
                    <span>评论了你的文章 《{{ item.arName }}》:</span>
                    <div class="con_box">评论：{{ item.content }}</div>
                  </div>
                  <div class="c_other">
                    <i
                      class="el-icon-delete delete"
                      @click="removeComment(item.index)"
                    ></i>
                    <i
                      class="iconfont icon-message"
                      @click="changeIndex(index)"
                      style="fontSize:15px"
                    ></i>
                  </div>
                  <div v-if="index == selectIndex">
                    <com-item
                      top="-80px"
                      left="0px"
                      width="400px"
                      :inputID="'comment' + index"
                      @handleCom="
                        handleCom($event, {
                          toUser: item.fromUser,
                          id: item.parentId,
                          comment: item.content,
                          article: item.article,
                          arName: item.arName,
                        })
                      "
                    ></com-item>
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <div style="padding:20px">暂无新评论</div>
            </template>
          </my-scroll>
        </div>
        <div class="box" v-show="tab == 'message'">
          <my-scroll :opacity="0.3">
            <template v-if="getInform.message && getInform.message.length">
              <div
                class="com_item"
                v-for="(item, index) in getInform.message"
                :key="'message' + index"
              >
                <div class="item_box">
                  <div class="namebox">
                    <div class="child_avatars">
                      <img
                        :src="
                          item.fromUser.isAdmin
                            ? getAdmin.photo
                            : item.fromUser.photo
                        "
                        alt=""
                      />
                    </div>
                    <div class="child_info">
                      <div class="from">
                        {{
                          item.fromUser.isAdmin
                            ? getAdmin.userName
                            : item.fromUser.name
                        }}
                        <i class="isAdmin" v-if="item.fromUser.isAdmin">博主</i>
                      </div>
                      <div class="c_time">
                        {{ item.date | chatDateFormate }}
                      </div>
                    </div>
                    <div class="new" v-if="!item.read">新</div>
                  </div>
                  <div class="c_content" v-if="item.message">
                    <span>回复了</span>
                    <span class="to" v-if="getUser.isAdmin"
                      >@{{
                        item.toUser.isAdmin
                          ? getAdmin.userName
                          : item.toUser.name
                      }}
                      <i class="isAdmin" v-if="item.toUser.isAdmin">博主</i>
                    </span>
                    <span class="to" v-else>你</span>
                    <span>的留言:</span>
                    <div class="item_comment">{{ item.message }}</div>
                    <div class="con_box">回复：{{ item.content }}</div>
                  </div>
                  <div class="c_content" v-else>
                    <span>给你留言:</span>
                    <div class="con_box">{{ item.content }}</div>
                  </div>
                  <div class="c_other">
                    <i
                      class="el-icon-delete delete"
                      @click="removeMessage(item.index)"
                    ></i>
                    <i
                      class="iconfont icon-message"
                      @click="changeIndex(index)"
                      style="fontSize:15px"
                    ></i>
                  </div>
                  <div v-if="index == selectIndex">
                    <com-item
                      top="-80px"
                      left="0px"
                      width="400px"
                      :inputID="'message' + index"
                      @handleCom="
                        handleMessCom($event, {
                          toUser: item.fromUser,
                          id: item.parentId,
                          content: item.content,
                        })
                      "
                    ></com-item>
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <div style="padding:20px">暂无新留言</div>
            </template>
          </my-scroll>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from "../../api/request"
import { mapGetters } from "vuex"
import ComItem from "../comment/comitem"
export default {
  data() {
    return {
      tab: "comment",
      childData: null,
      messData: null,
      selectIndex: -1,
      msgFlag: false,
    }
  },
  computed: {
    ...mapGetters([
      "getToken",
      "getNotify",
      "getInform",
      "getAdmin",
      "getUser",
    ]),
  },
  created() {
    if (!this.getNotify.comments) {
      this.$store.dispatch("ObtainNotice")
    }
  },
  components: {
    ComItem,
  },
  watch: {
    tab: function(newVal, oldVal) {
      if (newVal == "comment") {
        if (!this.getNotify.comments) {
          this.$store.dispatch("ObtainNotice")
        }
      } else {
        this.msgFlag = true
        if (!this.getInform.message) {
          this.$store.dispatch("ObtainInform")
        }
      }
    },
  },
  beforeDestroy() {
    // 判断评论通知中是否存在未读评论，存在则发送请求标为已读，不存在则不发送
    let flag = false
    this.getNotify.comments.forEach((item) => {
      if (!item.read) {
        flag = true
        return
      }
    })
    flag == true ? this.readComment() : ""
    if (this.msgFlag) {
      let msg = false
      this.getInform.message.forEach((item) => {
        if (!item.read) {
          msg = true
          return
        }
      })
      msg == true ? this.readMessage() : ""
    }
  },
  methods: {
    showMP() {
      this.$EventBus.$emit("messagePanel")
    },
    // 点击回复触发的事件
    changeIndex(index) {
      if (this.selectIndex == index) {
        this.selectIndex = -1
      } else {
        this.selectIndex = index
      }
    },

    // com-item组件触发的函数
    handleCom(child, obj) {
      this.childData = {
        fromUser: child.fromUser,
        c_content: child.c_content,
        c_date: child.c_date,
        toUser: obj.toUser,
        parentId: obj.id,
        article: obj.article,
        arName: obj.arName,
        comment: obj.comment,
      }
      this.childComment()
    },
    // 回复
    async childComment() {
      let result = await request({
        url: "/comment/obtain/child",
        data: this.childData,
        method: "post",
      })

      if (result.status) {
        this.$notify({
          title: "成功",
          message: result.msg,
          type: "success",
        })
      } else {
        this.$notify.error({
          title: "错误",
          message: result.msg,
        })
      }
    },
    // 将评论通知标为已读
    async readComment() {
      let res = await request({
        url: "/notice/read",
        data: {
          token: this.getToken,
        },
        method: "post",
      })
      this.$store.dispatch("ObtainNotice")
      this.$store.commit("updatePrompt", { type: "comment", flag: false })
    },
    // 删除评论通知
    async removeComment(index) {
      let res = await request({
        url: "/notice/remove",
        data: {
          token: this.getToken,
          index,
        },
        method: "post",
      })
      if (res.status) {
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
        })
        this.$store.dispatch("ObtainNotice")
      } else {
        this.$notify.error({
          title: "错误",
          message: "删除失败，请稍后重试",
        })
      }
    },
    // 将留言通知标为已读
    async readMessage() {
      let res = await request({
        url: "/inform/read",
        data: {
          token: this.getToken,
        },
        method: "post",
      })
      this.$store.dispatch("ObtainInform")
      this.$store.commit("updatePrompt", { type: "message", flag: false })
    },
    // 留言回复按钮触发的事件
    handleMessCom(child, obj) {
      this.messData = {
        fromUser: child.fromUser,
        c_content: child.c_content,
        c_date: child.c_date,
        message: obj.content,
        toUser: obj.toUser,
        parentId: obj.id,
      }
      this.reply()
    },
    // 回复留言
    async reply() {
      let result = await request({
        url: "/message/release/child",
        data: this.messData,
        method: "post",
      })
    },
    // 删除留言通知
    async removeMessage(index) {
      let res = await request({
        url: "/inform/remove",
        data: {
          token: this.getToken,
          index,
        },
        method: "post",
      })
      if (res.status) {
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
        })
        this.$store.dispatch("ObtainInform")
      } else {
        this.$notify.error({
          title: "错误",
          message: "删除失败，请稍后重试",
        })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../scss/common.scss";
@import "./messagepanel.scss";
</style>
